{include file="common/header" title="管理员增加"}
<style>
    .layui-form-switch {
        margin-top: 6px;
    }
</style>
<div class="x-body">
    <form class="layui-form"  method="post" enctype="multipart/form-data" >
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">基础设置</li>
                <li>内容编辑</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-col-xs12">
                        <blockquote class="layui-elem-quote title"><i class="seraph icon-caidan"></i> 基本设置</blockquote>
                        <div class="border">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md9 layui-col-xs7">
                                    <div class="layui-form-item magt3">
                                        <label class="layui-form-label">标题</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="title" class="layui-input newsName"
                                                   lay-verify="title" value="{$data.title}"
                                                   placeholder="请输入标题" required>
                                        </div>
                                    </div>
                            </div>
                                <div class="layui-col-md9 layui-col-xs7">
                                    <div class="layui-form-item magt3">
                                        <label class="layui-form-label">URL</label>
                                        <div class="layui-input-block">
                                            <input type="url" name="works_url" value="{$data.works_url}" class="layui-input newsName" lay-verify="url" placeholder="请输入URL">
                                        </div>
                                    </div>
                                </div>
                        </div>


                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md9 layui-col-xs7">
                                    <div class="layui-form-item magt3">
                                        <label class="layui-form-label"> 关键词</label>
                                        <div class="layui-input-block">
                                            <input type="text" value="{$data.keywords}" name="keywords" class="layui-input" lay-verify=""
                                                   placeholder="关键词;多个以英文逗号“,”分隔">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"> 描述</label>
                                        <div class="layui-input-block">
                                <textarea placeholder="请输入描述" name="description"
                                          class="layui-textarea abstract">{$data.description}</textarea>
                                        </div>
                                    </div>
                                </div>

                        <div class="layui-col-md3 layui-col-xs5">
                            <div class="layui-upload-list thumbBox mag0 magt3">
                                <img src="{$data.pic?:''}" class="layui-upload-img thumbImg">
                            </div>
                            <input type="hidden" name="pic" value="{$data.pic?:''}">
                        </div>
                        </div>
                        </div>
                    </div>
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md6 layui-col-xs12">
                            <blockquote class="layui-elem-quote title"><i class="seraph icon-caidan"></i> 分 类
                            </blockquote>
                            <div class="border">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"> 所　属</label>
                                    <div class="layui-input-block">
                                        <select name="column_id" lay-verify="column_id" required>
                                            <option value="">请选择栏目</option>
                                            {volist name="columnList" id="item"}
                                            {eq name="item.pid" value="0"}
                                            <option {$data.column_id==$item.id?'selected':''}  value="{$item.id}">{$item.name}</option>
                                            {else /}
                                            <option {$data.column_id==$item.id?'selected':''} value="{$item.id}">{:str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
                                                $item.level)}|---{$item.name}
                                            </option>
                                            {/eq}
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item magt10">
                                    <label class="layui-form-label"> 来　源</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="source" class="layui-input" lay-verify=""
                                               placeholder="请输入来源" value="{$data.source?:''}">
                                    </div>
                                </div>
                                <div class="layui-form-item magt10">
                                    <label class="layui-form-label"> 发布者</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="author"
                                               value="{$data.author?:''}"
                                               class="layui-input" lay-verify="" placeholder="请输入作者">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6 layui-col-xs12">
                            <blockquote class="layui-elem-quote title"><i class="layui-icon">&#xe609;</i> 发 布
                            </blockquote>
                            <div class="border">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><i class="layui-icon">&#xe60e;</i> 状　态</label>
                                    <div class="layui-input-block newsStatus">
                                        <select name="status" lay-verify="required">
                                            <option {$data.status==0?'selected':''}  value="0">立即发布</option>
                                            <option {$data.status==1?'selected':''} value="1">等待审核</option>
                                            <option {$data.status==2?'selected':''} value="2">保存草稿</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md6 layui-col-xs12">
                                    <label class="layui-form-label"><i class="layui-icon">&#xe609;</i> 发　布</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="create_time" title="立即发布" lay-skin="primary"
                                               lay-filter="release"
                                               checked/>
                                        <input type="radio"  name="create_time" title="定时发布" lay-skin="primary"
                                               lay-filter="release"/>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-hide releaseDate">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-block">
                                        <input type="text" value="{$data.publish?:''}" name="publish_time" class="layui-input" id="release"
                                               placeholder="请选择日期和时间" readonly/>
                                    </div>
                                </div>
                                <div class="layui-form-item openness">
                                    <label class="layui-form-label"><i class="seraph icon-look"></i> 公开度</label>
                                    <div class="layui-input-block">
                                        <input type="radio" {$data.isopen==0?'checked':''} name="isopen" value="0" title="开放浏览" lay-skin="primary"
                                               checked/>
                                        <input type="radio" {$data.isopen==1?'checked':''}  name="isopen" value="1" title="私密浏览" lay-skin="primary"/>
                                    </div>
                                </div>
                                <div class="layui-form-item newsTop">
                                    <label class="layui-form-label"><i class="seraph icon-zhiding"></i> 置　顶</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" {$data.istop==1?'checked':''} name="istop" value="1" lay-skin="switch" lay-text="是|否">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-col-xs12">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                            <div class="layui-upload-list">
                                <table class="layui-table">
                                    <thead>
                                    <tr>
                                        <th width="200px">文件名</th>
                                        <th width="280px">上传后的路径</th>
                                        <th>图片描述</th>
                                        <th width="80px">大小</th>
                                        <th width="60px">状态</th>
                                        <th width="200px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="demoList">
                                    {volist name="data.content" id="item"}
                                    <tr>
                                        <td>{$item}</td>
                                        <td><input type="text" disabled class="layui-input" name="img-{:time()}{:rand(0,10)}" value="{$key}" /></td>
                                        <td><input type="text" class="layui-input" name="text-{:time()}{:rand(0,10)}" value="{$item}" /></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <a class="layui-btn layui-btn-xs layui-btn-danger del_img">删除</a>
                                            <a class="layui-btn open_img layui-btn-xs">查看</a>
                                        </td>
                                    </tr>
                                    {/volist}
                                    </tbody>
                                </table>
                            </div>
                            <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr class="layui-bg-gray"/>
        <div class="layui-right">
            <a class="layui-btn layui-btn-sm" lay-filter="save" lay-submit><i
                    class="layui-icon">&#xe609;</i>发布</a>
            <a class="layui-btn layui-btn-primary layui-btn-sm" lay-filter="look"
               lay-submit>预览</a>
        </div>
        <input type="hidden" name="id" value="{$data.id}">
    </form>
</div>
<script>
    layui.use(['form', 'layer', 'laydate', 'upload'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            upload = layui.upload,
            laydate = layui.laydate,
            $ = layui.jquery;

        //定时发布
        var send_time = "{:date('Y-m-d h:i:s',time())}";
        laydate.render({
            elem: '#release',
            type: 'datetime',
            value: send_time,
            trigger: "click",
            done: function (value, date, endDate) {
                send_time = value;
            }
        });
        form.on("radio(release)", function (data) {
            if (data.elem.title === "定时发布") {
                $(".releaseDate").removeClass("layui-hide");
                $(".releaseDate #release").attr("lay-verify", "required");
                $("#release").val(send_time);
            } else {
                $(".releaseDate").addClass("layui-hide");
                $("#release").removeAttr("lay-verify");
                $("#release").val('');
            }
        });
        //执行实例
        var uploadInst = upload.render({
            elem: '.thumbBox' //绑定元素
            , url: '{:url("upload")}' //上传接口
            , field: 'file'
            , accept: 'images'
            , drag: false
            , data: {
                old: function () {
                    return $('input[name="pic"]').val();
                }
            }
            , method: "post",
            done: function (res, index, upload) {
                $('.thumbImg').attr('src', res['url']);
                $('input[name="pic"]').val(res['url']);
                $('.thumbBox').css("background", "#fff");
            }
            , error: function () {
                layer.msg('缩略图上传失败!');
            }
        });

        //多文件列表示例
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: '{:url("upload")}'
            , accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td></td>'
                        , '<td></td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        //清空 input file 值，以免删除后出现同名文件不可选
                        uploadListIns.config.elem.next()[0].value = '';
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload, obj) {
                if (res.code == 200) { //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(1).html('<input type="text" disabled class="layui-input" name="img-' + index + '" value="' + res.url + '" />');
                    tds.eq(2).html('<input type="text" class="layui-input" name="text-' + index + '" value="' + res.name + '" />');
                    tds.eq(4).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(5).html(''); //清空操作
                    tds.eq(5).html('<a class="layui-btn open_img layui-btn-xs">查看</a>'); //增加查看按钮
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                form.render();
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });


        $('#demoList').on('click', '.open_img', function () {
            let src = $(this).parents('tr').find('td').eq(1).find('input').val();
            var content = '<img width="180" height="180" src="' + src + '" />';
            layer.open({
                title: false,
                closeBtn: 1,
                type: 1,
                content: content  //这里content是一个普通的String
            });
        });

        $('#demoList .del_img').on('click', function () {
            let tr = $(this).parents('tr')
            let src = tr.find('td').eq(1).find('input').val();
            $.get('{:url("base/delAccessory")}',{accessory_path:src});
            tr.remove();
        });




        //自定义验证规则
        form.verify({
            title: function (val) {
                if (val === '') {
                    return "标题不能为空";
                }
            },
            content: function (val) {
                if (val === "") {
                    return "内容不能为空";
                }
            },
            column_id: function (val) {
                if (val === "") {
                    return "必须选择所属栏目";
                }
            },
            time: function (val) {
                if (val === "") {
                    return "定时发布时间不能为空";
                }
            }
        });

        //预览
        form.on("submit(look)", function () {
            layer.alert("此功能需要前台展示，实际开发中传入对应的必要参数进行文章内容页面访问");
            return false;
        });

        //监听提交
        form.on('submit(save)', function (data) {

            //发异步，把数据提交给php
            $.post('{:url("save")}', {data: data.field}, function (reg) {
                switch (reg.code) {
                    case 0:
                        layer.msg(reg.msg, {icon: 6}, function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                            // 可以对父窗口进行刷新
                            x_admin_father_reload();
                        });
                        break;
                    default:
                        layer.msg(reg.msg, {icon: 5});
                }

            }, 'json');
            return false;
        });


    });
</script>
</body>

</html>